<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background-color: white;
		}
		.wrapper{
			margin: 0 auto;
			width: 373px;
			height: 268px;
			background-color: #fff;
			border: 1px solid #000;
			margin-top:190px;
		}
		.content{
			margin: 0 auto;
			width: 328px;
			height: 249px;
			background-color: #fff5f4;
			margin-top:10px;
		}
		.fl{
			float: left;
		}
		button{
			width: 60px;
			height: 28px;
			background-color: #fff5f4;
			border:0;
			border-bottom: 1px solid pink;
		}
		img{
			width: 201px;
			height: 249px;
		}
		.left{
			border: 1px solid pink;
		}
		.right{
			border: 1px solid pink;
		}
		.middle{
			border-top:1px solid pink;

			border-bottom:1px solid pink;
		}
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		
		<div class="content">
			
			<div class="left fl">
				<button>女靴</button><br>
				<button>雪地靴</button><br>
				<button>冬裙</button><br>
				<button>呢大衣</button><br>
				<button>毛衣</button><br>
				<button>棉服</button><br>
				<button class="active">女裤</button><br>
				<button>羽绒服</button><br>
				<button>牛仔裤</button><br>
			</div>

			<div class="middle fl">
				<img src="img/女裤.jpg" alt="">
			</div>

			<div class="right fl">
				<button>女包</button><br>
				<button>男包</button><br>
				<button>登山鞋</button><br>
				<button>皮带</button><br>
				<button>围巾</button><br>
				<button>皮衣</button><br>
				<button>男毛衣</button><br>
				<button>男棉服</button><br>
				<button>男靴</button><br>
			</div>


		</div>

	</div>
	
</body>

	<script src="../jquery-3.3.1.min.js"></script>

	<script>

		//获取到所有的button
		var btns = $("button");

		for(var i = 0;i<btns.length;i++){

			btns[i].index = i;

			//对每一个button绑定点击事件
			$(btns[i]).click(function(){

				//排他
				for(var j = 0;j<btns.length;j++){

					$(btns[j]).removeClass("active");
				}

				//对当前的button加上active
				$(btns[this.index]).addClass("active");

				//更换图片
				//先获取到图片
				var img = $("img");

				//还得获取到button内容
				// console.log($(btns[this.index]).text());

				var temp = $(btns[this.index]).text();

				console.log(temp);

				$(img).attr("src","img/"+temp+".jpg");

			})
		}
	</script>
</html>